//root
[data-name=cs] {
  #fks-app{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: hidden;

  .copyright {
    position: absolute;
    z-index: 1000;
    bottom: 10px;
    left: 50%;
    color: #999;
    transform: translate(-50%);
  }

  .main-container {
    margin-left: $sideBarWidth;
    transition: margin-left .15s;
  }

  >.copyright {
    margin-left: calc(#{$sideBarWidth} / 2);
    transition: margin-left .15s;
  }

  .logo-container {
    transition: width .15s;
  }

  .logo-container .logo {
    transition: transform .14s;
  }

  //App > .main-container
  .main-container {
    position: relative;
    min-height: 100%;
    background: #f1f2f6;

    //App > .main-container > fks-app-main
    .fks-app-main {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: calc(100vh - 56px);
      padding: 16px;
      overflow: auto;

      &.tags-view {
        padding: 0 16px 16px;
      }

      &.footer-view {
        padding: 16px 16px 0;
      }

      &.tags-view.footer-view {
        padding: 0 16px 40px;
      }

      &.tags-view,
      &.footer-view {
        height: calc(100vh - 96px);
      }

      &.full-screen {
        height: 100vh !important;
        padding: 0 !important;
        background-color: #fff !important;
      }
    }
  }

  .logo-container {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: $sideBarWidth;
    height: 56px;
    overflow: hidden;
    line-height: 56px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)), var(--theme-color);

    & .logo-link {
      width: 100%;
      height: 100%;


      & .logo {
        vertical-align: middle;
        color: #eee;
      }
    }
  }

  //Navbar
  .head-navbar-container {
    z-index: 1002;
  }

  //Sidebar
  .sidebar-container {
    position: fixed;
    z-index: 1001;
    top: 56px;
    bottom: 0;
    width: $sideBarWidth !important;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .08) 79%, rgba(255, 255, 255, 0) 100%), var(--theme-color);
    transition: width .15s;

    // reset fawkes-lib css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .fks-scrollbar__bar.is-vertical {
      right: -8px;
    }

    .fks-scrollbar {
      height: calc(100% - 80px);
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .fks-menu {
      width: 100% !important;
      height: 100%;
      border: none;
      background: transparent;

      &-item.is-active {
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 4px;
          height: 40px;
          background: var(--theme-color);
        }

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--theme-color) !important;
          opacity: .1;
        }
      }
    }

    // menu hover
    .fks-submenu__title {
      i {
        color: #fff;
      }

      &:hover {
        color: #fff !important;
        background-color: rgba($theme, .6) !important;
      }
    }

    .is-active {
      >.fks-submenu__title {
        color: #fff;
        background-color: $theme !important;
      }

      &.is-opened .is-active.is-opened .fks-submenu__title {
        background-color: rgba($theme, .8) !important;
      }

      &.is-opened > .fks-submenu__title {
        background-color: rgba($theme, .6) !important;
      }
    }
  }

  //App > hideSidebar > main-containner
  &.hideSidebar {
    .main-container {
      padding-left: 0;
      margin-left: 0 !important;
    }

    >.copyright {
      margin-left: 0 !important;
    }
  }

  //App > collapseSidebar
  &.collapseSidebar {
    .sidebar-container {
      width: #{$collapseBarWith} !important;

      .fks-submenu {
        overflow: hidden;

        & > .fks-submenu__title {
          padding: 0 !important;

          .svg-icon {
            margin-left: 20px;
          }

          .fks-submenu__icon-arrow {
            display: none;
          }
        }
      }

      .fks-menu--collapse {
        .fks-submenu {
          & > .fks-submenu__title {
            & > span {
              display: inline-block;
              width: 0;
              height: 0;
              overflow: hidden;
              visibility: hidden;
            }
          }
        }
      }
    }

    .main-container {
      margin-left: $collapseBarWith;
    }

    >.copyright {
      margin-left: calc(#{$collapseBarWith} / 2);
    }

    .logo-container {
      width: $collapseBarWith;

      .logo {
        transform: translateX(8px);
      }
    }
  }

  .fks-menu--collapse .fks-menu .fks-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  &.mobile {
    position: fixed;
    top: 0;

    .main-container {
      margin-left: 0;
    }

    .sidebar-container {
      width: $sideBarWidth !important;
    }

    &.collapseSidebar {
      .sidebar-container {
        transform: translate3d(-$sideBarWidth, 0, 0);
        transition-duration: .3s;
        pointer-events: none;
      }
    }
  }

  .withoutAnimation {
    .main-container,
    .sidebar-container,
    >.copyright {
      transition: none;
    }
  }

  .fks-menu .svg-icon {
    margin-right: 5px;
  }

  @include clearfix;
}

.sidebar-container,
.fks-menu--vertical .nest-menu {
  & .fks-submenu > .fks-submenu__title,
  & .fks-submenu .fks-menu-item,
  & .fks-menu-item {
    height: $menuItemHeight;
    line-height: $menuItemHeight;
    color: #ffffffe6;
    //min-width: $sideBarWidth !important;
    // background-color: $subMenuBg !important;
    i {
      color: #fff;
    }

    &:hover {
      color: #fff !important;
      background-color: rgba($theme, .6) !important;
    }

    &.is-active {
      background-color: $theme !important;
    }
  }
}

.fks-menu--vertical {
  :not(.nest-menu) .fks-submenu > .fks-submenu__title span + span {
    margin-left: 24px;
  }

  .nest-menu .fks-submenu > .fks-submenu__title,
  .fks-menu-item {
    &:hover {
      // you can use $subMenuHover
      background-color: $menuHover !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.fks-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)), var(--theme-color);
    background-color: none !important;

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 20px;
      background: #99a9bf;
    }
  }
}
}